<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设置背景-颜色渐变(setting background - gradient color)</title>
  <!-- 
  background gradient color  是 CSS 中用于创建渐变背景色的属性。
  渐变背景色的总结： 
 
    - 使用  background  属性结合  linear-gradient()  或  radial-gradient()  函数可以创建线性渐变或径向渐变的背景色效果。 
    1. linear-gradient()  函数用于创建线性渐变，可指定渐变的方向、颜色起止点及颜色分布。 
    2. radial-gradient()  函数用于创建径向渐变，可指定渐变的中心点、形状、大小及颜色分布, 如圆形（circle）、椭圆形（ellipse）等。 
    3. repeating-linear-gradient() 和 repeating-radial-gradient() 重复渐变可根据需要复制渐变，以填充指定区域。
    4. conic-gradient() 锥形渐变会沿着一个圆过渡颜色。
    
  总结: 渐变可以由两个或多个颜色组成，也可以包含透明度值，实现更丰富的背景色效果。可以在背景属性中指定多个渐变，通过逗号分隔，实现多重背景渐变效果。 
   -->
  <style>
    div {
      width: 500px;
      height: 200px;
    }
  </style>
  <style>
    /* 线性渐变 - 下往上颜色渐变 */
    .background-image-linear-gradient-top {
      background-image: linear-gradient(to top, red, blue);
    }

    /* 线性渐变 - 左往右颜色渐变 */
    .background-image-linear-gradient-right {
      background-image: linear-gradient(to right, red, green, blue);
    }

    /* 线性渐变 - 上往下颜色渐变 */
    .background-image-linear-gradient-bottom {
      background-image: linear-gradient(to bottom, red, green, blue);
    }

    /* 线性渐变 - 右往左颜色渐变 */
    .background-image-linear-gradient-left {
      background-image: linear-gradient(to left, red, green, blue);
    }


    /* 径向渐变 - 圆形颜色渐变 */
    .background-image-radial-gradient-center {
      background-image: radial-gradient(circle at center, red, green, blue);
    }

    .background-image-radial-gradient-top {
      background-image: radial-gradient(circle at top, red, green, blue);
    }

    .background-image-radial-gradient-right {
      background-image: radial-gradient(circle at right, red, green, blue);
    }

    .background-image-radial-gradient-bottom {
      background-image: radial-gradient(circle at bottom, red, green, blue);
    }

    .background-image-radial-gradient-left {
      background-image: radial-gradient(circle at left, red, green, blue);
    }

    /* 锥形渐变 - 颜色渐变 */
    .background-image-conic-gradient {
      background: conic-gradient(lightpink, white, powderblue);
    }

    /* 重复线性渐变 - 背景颜色: background-image-repeating-linear-gradient */
    .background-image-repeating-linear-gradient {
      background: repeating-linear-gradient(
        to top left,
        lightpink,
        lightpink 5px,
        white 5px,
        white 10px
      );
    }
  </style>
</head>
<body>

  <h3>线性渐变 - 下往上背景颜色: background-image-linear-gradient-top</h3>
  <div class="background-image-linear-gradient-top"></div>
  <h3>线性渐变 - 左往右背景颜色: background-image-linear-gradient-right</h3>
  <div class="background-image-linear-gradient-right"></div>
  <h3>线性渐变 - 上往下背景颜色: background-image-linear-gradient-bottom</h3>
  <div class="background-image-linear-gradient-bottom"></div>
  <h3>线性渐变 - 右往左背景颜色: background-image-linear-gradient-left</h3>
  <div class="background-image-linear-gradient-left"></div>

  <h2>------------------------------------------------</h2>

  <h3>径向渐变 - 默认背景颜色: background-image-radial-gradient-center</h3>
  <div class="background-image-radial-gradient-center"></div>
  <h3>径向渐变 - 靠上背景颜色: background-image-radial-gradient-top</h3>
  <div class="background-image-radial-gradient-top"></div>
  <h3>径向渐变 - 靠右背景颜色: background-image-radial-gradient-right</h3>
  <div class="background-image-radial-gradient-right"></div>
  <h3>径向渐变 - 靠下背景颜色: background-image-radial-gradient-bottom</h3>
  <div class="background-image-radial-gradient-bottom"></div>
  <h3>径向渐变 - 靠左背景颜色: background-image-radial-gradient-left</h3>
  <div class="background-image-radial-gradient-left"></div>
  
  <h2>------------------------------------------------</h2>

  <h3>锥形渐变 - 背景颜色: background-image-conic-gradient</h3>
  <div class="background-image-conic-gradient"></div>
  
  <h2>------------------------------------------------</h2>
  
  <h3>重复线性渐变 - 背景颜色: background-image-repeating-linear-gradient</h3>
  <div class="background-image-repeating-linear-gradient"></div>

</body>
</html>